<!DOCTYPE html>
<html ng-app="App">
<head>
    <title locale="locale/iot-control-panel-title">IoT Control Panel</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
    <script type="text/javascript" src="../../script/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
    <script type="text/javascript" src="../../script/applocale.js"></script>
</head>
<body>
    <div class="ui container">
        <div class="ui basic segment">
            <h3 class="ui header">
                <span locale="locale/iot-hub-title">IoT Hub</span>
                <div class="sub header" locale="locale/iot-hub-description">List of supported IoT protocol scanners for this Host</div>
            </h3>
        </div>
        <div>
            <table class="ui celled  very basic compact table">
                <thead>
                  <tr>
                    <th locale="locale/protocol-name">Protocol Name</th>
                    <th locale="locale/description">Description</th>
                    <th locale="locale/version-protocol">Version (Protocol)</th>
                    <th locale="locale/author">Author</th>
                    <th locale="locale/release-date">Release Date</th>
                  </tr>
                </thead>
                <tbody id="protocolScannerList">
                  <tr>
                    <td data-label="">Home Dynamic v2</td>
                    <td data-label="">A basic IoT communication protocol for ESP8266 made by Makers</td>
                    <td data-label="">v2 (v2)</td>
                    <td data-label=""><i class="user icon"></i>tobychui
                        <br><i class="mail icon"></i><a href="mailto:hds@arozos.com">hds@arozos.com</a>
                        <br><i class="globe icon"></i><a href="hds.arozos.com">hds.arozos.com</a></td>
                    <td data-label=""></td>
                  </tr>
                </tbody>
              </table>
        </div>
    </div>
    <script>
        var iotLocale = NewAppLocale();
        iotLocale.init("../locale/system_settings/iot.json", function(){
            iotLocale.translate();
        });

        initScannerHandlerList();
        function initScannerHandlerList(){
            $.get("../../system/iot/listScanner", function(data){
                if (data.error !== undefined){
                    alert(data.error);
                }else{
                    $("#protocolScannerList").html("");
                    data.forEach(ph => {
                        var releaseDate = new Date(ph.ReleaseDate * 1000);
                        var year = releaseDate.getFullYear();
                        var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
                        var month = months[releaseDate.getMonth()];
                        var date = releaseDate.getDate();
                        var displayReleaseDate = date + " " + month + " " + year;
                        $("#protocolScannerList").append(`<tr>
                            <td data-label="">${ph.Name}</td>
                            <td data-label="">${ph.Desc}</td>
                            <td data-label="">v${ph.Version} (v${ph.ProtocolVer})</td>
                            <td data-label=""><i class="user icon"></i>${ph.Author}
                                <br><i class="mail icon"></i><a href="mailto:${ph.AuthorEmail}">${ph.AuthorEmail}</a>
                                <br><i class="globe icon"></i><a href="${ph.AuthorWebsite}">${ph.AuthorWebsite}</a></td>
                            <td data-label="">${displayReleaseDate}</td>
                        </tr>`);
                    });
                }
            })
        }
    </script>
</body>
</html>
